<template>
	<view class="page-view">
		<login ref="login" @refresh="refresh"></login>
		<view class="banner">
			<image class="banner-img" src="../../static/index/background.png"></image>
		</view>
		<view class="banner-view">
			<swiper class="swiper" circular indicator-color="rgba(0, 0, 0, 0.1)" indicator-active-color="#ffffff" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,i) in indexModelList.index_banner" :key="i">
					<view class="swiper-item">
						<image class="img" :src="item.modelIco"></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		<view class="body-box">
			<view class="notice-view">
				<uni-notice-bar background-color="#ffffff" color="#2A2D2F" scrollable :text="text"></uni-notice-bar>
			</view>
			<view class="function-view">
				<view class="button-view" @tap="goto(item)" v-for="(item,index) in indexModelList.index_type">
					<image class="service-icon" :src="item.modelIco"></image>
					<label class="button-text">{{item.littleTitle}}</label>
				</view>
				
			</view>
			<view class="box">
				<view class="line-title">热门药店</view>
				<view class="flex">
					<view class="left-box">
						<view class="box-title-1">药店生意经</view>
						<view class="box-info">专业标准/经验丰富</view>
						<image class="img-button" src="../../static/index/button-1.png"></image>
					</view>
					<view class="right-box">
						<view class="box-1">
							<view class="box-title-2">美团热销榜单top</view>
							<image class="img-button" src="../../static/index/button-2.png"></image>
						</view>
						<view class="box-2">
							<view class="box-title-3">热销top药店</view>
							<image class="img-button" src="../../static/index/button-3.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="line-title flex align-items-center">
					<image class="line-icon" src="../../static/index/icon-9.png"></image>
					合作品牌
					<view class="more">
						查看更多
						<image src="../../static/index/right.png"></image>
					</view>
				</view>
				<view class="flex">
					<view class="item-box" v-for="(item,i) in indexModelList.index_brand">
						<image :src="item.modelIco"></image>
					</view>
					 
				</view>
			</view>
			<view class="box">
				<view class="line-title flex align-items-center">
					<image class="line-icon" src="../../static/index/icon-10.png"></image>
					合作药店
					<view class="more">
						查看更多
						<image src="../../static/index/right.png"></image>
					</view>
				</view>
				<view class="flex">
					<view class="item-box" v-for="(item,i) in indexModelList.index_phy">
						<image :src="item.modelIco"></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import login from '@/components/x-unit/login/login.vue'
	import {
		 getIndexModel
	} from '@/common/api/api.js'
	export default {
		components: {
			login,
		},
		data() {
			return {
				text: "掌店易科技是一家专注企业数字化赋能企业数字化赋能企业数字化赋能",
				indexModelList:{},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onShow() {
			console.log("token",this.$store.state.$token)
			// this.$refs.login.open();
			if (!this.$store.state.$token) {
				setTimeout(() => {
					this.$refs.login.open();
				}, 100);
			} 
			this.userInfoId = this.$store.state.$token;
			this.handleGetIndexModel();
		},
		// 1.发送给朋友
		onShareAppMessage(res) {
			return {
				title: "首页"
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title: "首页"
			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			goto(item) {
				console.log("item",item)
				// 根据对象类型 判定如何跳转
				if(item.contentType=="1"){
					// 文章详情
					uni.navigateTo({
						url:'/pages/notice/index?id='+item.id
					})
				}
				if(item.contentType=="2"){
					// 外部链接
					uni.navigateTo({
						url:'/pages/webView?url='+item.noticeContent.replace(/[\r\n]/g,"")
					})
				}
				if(item.contentType=="3"){
					// 内部链接
					uni.navigateTo({
						url:item.noticeContent.replace(/[\r\n]/g,"")
						// 
					})
				}
			},
			handleGetIndexModel(){
				getIndexModel().then(res=>{
					this.indexModelList=res.data;
					console.log("index",res.data)
				})
			},
		}
	}
</script>

<style scoped>
	.page-view {
		position: relative;
	}
	
	.banner-img {
		width: 750rpx;
		height: 746rpx;
	}
	
	.banner-view{
		position: absolute;
		z-index: 999;
		top: 90rpx;
		width: 100%;
		
	}
	
	.banner-view .img{
		width: 770rpx;
		height: 263rpx;
		padding-bottom: 10rpx;
	}
	
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
		
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	
	.body-box {
		width: 96%;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: 400rpx;
	}

	.notice-view {
		border-radius: 10rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.notice-view>>>.uni-noticebar {
		border-radius: 10rpx;
	}

	.function-view {
		border-radius: 10rpx;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		background: #ffffff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.button-view {
		float: left;
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 25rpx 0;
	}

	.service-icon {
		width: 55rpx;
		height: 55rpx;
	}

	.button-text {
		font-size: 24rpx;
		color: #171717;
		margin-top: 18rpx;
	}
	
	.box{
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 21rpx 18rpx;
		position: relative;
	}
	
	.line-title{
		font-weight: 600;
		font-size: 34rpx;
		color: #2A2D2F;
		margin-bottom: 31rpx;
	}
	
	.line-icon{
		width: 36rpx;
		height: 36rpx;
		margin-right: 6rpx;
	}
	
	.left-box{
		width: 290rpx;
		padding: 53rpx 40rpx;
		min-height: 300rpx;
		background-image: url('../../static/index/back-1.png');
		background-repeat:round;
	}
	
	.box-title-1{
		font-weight: 600;
		font-size: 30rpx;
		color: #3D4A56;
	}
	
	.box-title-2{
		font-weight: 600;
		font-size: 30rpx;
		color: #7D2B1C;
		margin-bottom: 20rpx;
	}
	
	.box-title-3{
		font-weight: 600;
		font-size: 30rpx;
		color: #44413B;
		margin-bottom: 20rpx;
	}
	
	.box-info{
		font-size: 24rpx;
		color: #7E838A;
		margin: 18rpx 0;
	}
	
	.right-box{
		width: 375rpx;
		margin-left: 17rpx;
	}
	
	.right-box .box-1{
		width: 100%;
		padding: 28rpx 33rpx;
		min-height: 141rpx;
		background-image: url('../../static/index/back-2.png');
		background-repeat:round;
		margin-bottom: 23rpx;
	}
	
	.right-box .box-2{
		width: 100%;
		padding: 28rpx 33rpx;
		min-height: 143rpx;
		background-image: url('../../static/index/back-3.png');
		background-repeat:round;
	}
	
	.img-button{
		width: 132rpx;
		height: 55rpx;
	}
	
	.flex{
		display: flex;
	}
	
	.align-items-center{
		align-items: center;
	}
	
	.more{
		font-weight: 400;
		font-size: 24rpx;
		color: #818483;
		position: absolute;
		top: 27rpx;
		right: 30rpx;
		display: flex;
		align-items: center;
	}
	
	.more >>> image{
		width: 10rpx;
		height: 16rpx;
		margin-left: 5rpx;
	}
	
	.item-box{
		width: 210rpx;
		height: 96rpx;
		background: #FFFAEE;
		border-radius: 10rpx;
		margin-right: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.item-box >>> image{
		width: 100%;
		height: 100%;
	}
</style>